<template>
	<view class="container">
		<!-- 头部介绍 -->
		<view class="substance">
			为了你的账户资金安全，请绑定本人的借记卡银行卡，请勿填写信用卡号，实名绑定银行卡后将不再允许修改姓名和身份证，请务必填写正确身份信息。
		</view>
		<!-- 头部介绍 -->
		
		<!--内容部分-->
		<tui-list-view class="tui-list-view-center">
			<bolck v-for="(item, index) in list" :key="index">
				<tui-list-cell :arrow="false" class="tui-list" :hover="false"  v-if="item.extracting == 1">
					<view class="tui-list-cell-name tui-list-cell-name-extracting">{{item.name}}</view>
					<input v-if="idno && item.key == 'idno'" disabled="disabled" placeholder-class="phcolor" class="tui-input" :name="item.key" v-model="item.val"  :placeholder="'请输入'+item.introduce" type="text" />
					<input v-else-if="cardholder && item.key == 'cardholder'" disabled="disabled" placeholder-class="phcolor" class="tui-input" :name="item.key" v-model="item.val"  :placeholder="'请输入'+item.introduce" type="text" />
					<input v-else placeholder-class="phcolor" class="tui-input" :name="item.key" v-model="item.val"  :placeholder="'请输入'+item.introduce" type="text" />
				</tui-list-cell>
			</bolck>
		</tui-list-view>
		<view v-if="status == 1">
			<view class="adlet" @click="deletes(network_id)">删除</view>
		</view>
		<!--内容部分-->
		
		<!-- 添加 -->
		<view class="tui-btn-box">
			<button v-if="status == 0" class="btn-primary" hover-class="btn-hover" formType="submit" type="primary" @tap="detail('./my',1)">确认绑定</button>
			<button v-else class="btn-primary" hover-class="btn-hover" formType="submit" type="primary" @tap="detail('./my',1)">确认修改</button>
		</view>
		<!-- 添加 -->
		
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
	</view>
</template>

<script>
	const date = require("../../utils/util.js")
	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiActionsheet from "@/components/actionsheet/actionsheet"
	import tuiToast from "@/components/extend/toast/toast"
	
	export default {
		components: {
			tuiListView,
			tuiListCell,
			tuiIcon,
			tuiTag,
			tuiActionsheet,
			tuiToast
		},
		data() {
			return {
				list: [
					{key: 'cardholder','name': '姓名',type: 'must',val:'',field: 1,extracting:1, introduce:'持卡人姓名'},
					{key: 'idno','name': '身份证',type: 'must',val:'',field: 1,extracting:1,introduce:'身份证'},
					{key: 'card_no','name': '银行卡',type: 'must',val:'',field: 1,extracting:1,introduce:'银行卡'},
					{key: 'mobile','name': '手机号',type: 'must',val:'',field: 1,extracting:1,introduce:'手机号'},
				],
				status: '0',
				network_id: '0',
				element: [],
				state: '-1',
				canonical: {
					mobile: /^[1][3,4,5,7,8,9][0-9]{9}$/,
					card_no: /^([1-9]{1})(\d{12,18})$/,
					idno: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
				},
				userInfo: '',
				idno: '',
				cardholder: '',
			}
		},
		onLoad: function(option) {
			this.getAccount();
		},
		methods: {
			getAccount: function(){
				let that = this;
				that.tui.request_false('user/info',{}).then((res) => {
					if(res.code == '0000'){
						that.resInfo = res;
						console.log('测试info返回值',that.resInfo);
						that.list['0']['val'] = that.resInfo.info.cardholder;
						that.list['1']['val'] = that.resInfo.info.idno;
						that.idno = that.resInfo.info.idno;
						that.cardholder = that.resInfo.info.cardholder;
					}else{
						let params = {
							title: "请登陆",
							imgUrl: "/static/toast/info-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
				})
			},
			deletes: function(network_id) {
				let that = this;
				var extractingStatus = 0;
				var extractingMsg = '';
				var formData = [];
				wx.showModal({
					title: '提示',
					content: '您确认删除自提点嘛',
					success: (res) => {
						console.log(res.confirm);
						if (res.confirm == true) {
							console.log(that.state);
							if(that.state > -1){
								that.element.splice(that.state,1);
								getApp().globalData.goodsDetails = that.element;
							}
							that.tui.request('user/networkDel', {
									network_id: that.network_id,
							}).then((res) => {
								if (res.code == '0000') {
									let params = {
										title: "删除成功",
										imgUrl: "/static/toast/check-circle.png",
										icon: true
									};
									that.$refs.toast.show(params)
									setTimeout(function() {
										uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
											delta: 1
										});
									}, 2000);
								} else {
									let params = {
										title: res.msg,
										imgUrl: "/static/toast/info-circle.png",
										icon: true
									};
									that.$refs.toast.show(params)
								}
							}).catch((err) => {
								that.toast("服务器异常");
							})
						} else if (res.cancel == false) {
							console.log('用户点击取消')
						}
					}
				})
			},
			detail: function() {

				var extractingStatus = 0;
				var extractingMsg = '';
				var formData = [];
				let that = this;
				for(let i = 0; i < this.list.length; i++){
					console.log('这是什么的',this.list[i]['extracting'],this.list[i]['val'])
					if(this.list[i]['extracting'] == 1 && this.list[i]['val'] == '' ){
						extractingStatus = 1;
						extractingMsg = "请填写" + this.list[i]['name'];
						break
					}
					
					if(this.canonical[this.list[i]['key']]){
						var myreg = this.canonical[this.list[i]['key']];
						console.log(myreg);
						if(!myreg.test(this.list[i]['val'])){
							console.log('失败');
							extractingStatus = 1;
							extractingMsg = this.list[i]['name'] + '输入不正确!';
							break;
						}
					}
					
					formData[this.list[i]['key']] = this.list[i]['val'];
				}
				if(extractingStatus == 1){
					let params = {
						title: extractingMsg,
						imgUrl: "/static/toast/check-circle.png",
						icon: true
					};
					that.$refs.toast.show(params)
					return false;
				}else{
					that.tui.request('user/cardAdd', {
							mobile: formData['mobile'],
							cardholder: formData['cardholder'],
							card_no: formData['card_no'],
							idno: formData['idno'],
						}).then((res) => {
						if (res.code == '0000') {
							let params = {
								title: "操作成功",
								imgUrl: "/static/toast/check-circle.png",
								icon: true
							};
							that.$refs.toast.show(params)
							
							var bankcard = {
								card_id:res.data,
								cardholder:formData['cardholder'],
								card_no:formData['card_no'],
							}
							wx.setStorage({
							   key: 'bankcard',
							   data: bankcard
							});
							setTimeout(function() {
								uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
									delta: 1
								});
							}, 2000);
						} else {
							let params = {
								title: res.msg,
								imgUrl: "/static/toast/info-circle.png",
								icon: true
							};
							that.$refs.toast.show(params)
						}
					}).catch((err) => {
						that.toast("服务器异常");
					})
				}
			}
		},
	}
</script>

<style>
	.substance{
		margin-bottom: 40rpx;
		background: #FFF;
		padding: 40rpx;
		font-size: 28rpx;
		color: #999;
	}
	
	.adlet{
		width: 135rpx;
		text-align: center;
		border: 1rpx solid red;
		color: red;
		margin-top: 10rpx;
		margin-right: 20rpx;
		border-radius: 13rpx;
		font-size: 26rpx;
		line-height: 45rpx;
		float: right;
	}
	
	.tui-input{
		/* z-index: -1; */
		width: 100% !important;
	}
	
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-list-view-top {
		padding-top: 20upx !important
	}
	.tui-list-view-top  .tui-list-cell-name{
		padding-left: 0rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #8f8f8f !important;
	}
	.tui-list-title {
		font-size: 30rpx;
		font-weight: 450;
		color: #000000 !important; 
	}
	
	.tui-list-view-top .tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 30rpx;
		line-height: 1;
		color: #000;
	}
	.tui-list-add .tui-right{
		color: #0A8FE2 !important;
	}
	.tui-list-cell-name-extracting{
		min-width: 135rpx !important; 
	}
	.tui-list-cell-name {
		/* padding-left: 20upx; */
		vertical-align: middle;
		line-height: 30upx;
	}

	.tui-list::after {
		left: 94upx !important
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 30rpx;
		line-height: 1;
		color: #999;
	}



	.tui-msg-right {
		max-width: 120upx;
		height: 88upx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76upx;
		padding-bottom: 10upx;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24upx;
		line-height: 24upx;
		color: #9397a4;
	}

	.tui-msg::after {
		left: 154upx !important
	}
	.footMar{
		margin-top: 10rpx;
		/* padding-bottom: 280rpx; */
	}
	.footMar .tui-list-cell{
		background: #f5f6f8 !important;
	}
	.tui-list-cell-name{
		font-size: 30rpx;
		font-weight: 400;
	}
	
	.footMar .tui-list-cell::after{
		border-bottom: none
	}
	.tui-btn-box {
		/* width: 100%;	 */
		padding: 40rpx 30rpx 40rpx 30rpx;
		/* box-sizing: border-box; */
		background: #F5F6F8;
		/* padding-bottom: 50px; */
		/* box-shadow: 0px 0px 15px rgba(0,0,0,0.1); */
		/* position: fixed; */
		display: flex;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.btn-primary {
		background: #1193e3 !important;
		border-radius: 20rpx !important;
		margin-bottom: 30px !important;
		font-size: 34rpx !important;
		height: 100rpx !important;
		line-height: 100rpx !important;
	}
	
	.tui-light-green{
		background-color: #FFF !important;
	}
</style>